<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        .container {
            height: auto;
            width: 1024px;
            margin: 0 auto;
            border: 1px solid #ddd;
            background-color: #f5f5f5;
        }

        .inner {
            margin: 50px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="inner">
        <form>
            <label>用户名：</label>
            <input id="username" name="username" oninput="get_user_info_console()" placeholder="请输入用户名" type="text">
            <label>密码：</label>
            <input id="password" name="password" oninput="get_user_info_console()" placeholder="请输入密码" type="password">
            <input name="submit" onclick="get_user_info_alert()" type="submit" value="提交">
            <input type="reset" value="重置所有填写或选择项目">
            <br/>
            <br/>
            <label>最喜欢的电影选择：</label>
            <table>
                <tr>
                    <td><input id="film1" name="film" onclick="film_list()" type="checkbox" value="哈利波特1">哈利波特1</td>
                    <td><input id="film2" name="film" onclick="film_list()" type="checkbox" value="哈利波特2">哈利波特2</td>
                    <td><input id="film3" name="film" onclick="film_list()" type="checkbox" value="哈利波特3">哈利波特3</td>
                </tr>
                <tr>
                    <td><input id="film4" name="film" onclick="film_list()" type="checkbox" value="哈利波特4">哈利波特4</td>
                    <td><input id="film5" name="film" onclick="film_list()" type="checkbox" value="哈利波特5">哈利波特5</td>
                    <td><input id="film6" name="film" onclick="film_list()" type="checkbox" value="哈利波特6">哈利波特6</td>
                </tr>
                <tr>
                    <td><input id="film7" name="film" onclick="film_list()" type="checkbox" value="哈利波特7">哈利波特7</td>
                    <td><input id="film8" name="film" onclick="film_list()" type="checkbox" value="哈利波特8">哈利波特8</td>
                    <td><input id="film9" name="film" onclick="film_list()" type="checkbox" value="哈利波特9">哈利波特9</td>
                </tr>
            </table>
            <br/>
            <input name="myfile" type="file">
        </form>
    </div>
</div>
<script>
    function get_user_info_alert() {
        var n = document.getElementById("username").value;
        var p = document.getElementById("password").value;
        var user_info = "用户名：" + n + "\n密码：" + p;
        alert(user_info);
    }

    function get_user_info_console() {
        if (document.getElementById("username")) {
            console.log("用户名：" + document.getElementById("username").value)
        } else (document.getElementById("password"))
        {
            console.log("密码：" + document.getElementById("password").value)
        }
    }

    function film_list() {
        if (document.activeElement.checked == true) {
            console.log("最喜欢的电影：" + document.activeElement.value)
        }
    }
</script>
</body>
</html>